<script setup lang="ts">
import { type FormInstance, Message, type TreeNodeData } from '@arco-design/web-vue'
import { EmployeeApi } from '@/apis'
import { useForm } from '@/hooks'
// import type { Gender, Status } from '@/types/global'

// import { useDept, useRole } from '@/hooks'

const emit = defineEmits<{
  (e: 'change'): void
}>()

const visible = ref(false)
const formRef = ref<FormInstance>()

const rules: FormInstance['rules'] = {
  password: [{ required: true, message: '请输入密码' }],
}

const { form, resetForm } = useForm({
  id: '', // To hold the ID
  password: '', // To hold the new password
})

// 重置
const reset = () => {
  formRef.value?.resetFields()
  resetForm()
}

// 新增
const open = (id: string) => {
  form.id = id // Set the ID in the form object
  visible.value = true
}

// 保存密码
const onSave = async () => {
  const isInvalid = await formRef.value?.validate()
  if (isInvalid) {
    return false
  }
  await EmployeeApi.resetPassword(form)
  Message.success('修改成功')
  emit('change')
  return true
}

defineExpose({ open })
</script>

<template>
  <ProFormPanel
    v-model:visible="visible"
    mode="modal"
    title="修改密码"
    @confirm="onSave"
    @close="reset"
  >
    <a-form ref="formRef" layout="vertical" :model="form" :rules size="medium">
      <a-form-item label="修改密码" field="password">
        <a-input-password v-model.trim="form.password" placeholder="请输入新的密码" :max-length="32" autocomplete="on" />
      </a-form-item>
    </a-form>
  </ProFormPanel>
</template>

<style lang="less" scoped>
</style>
